<template>
  <div id="box" class="boomImgBox"></div>
</template>

<script>

// 图片预加载
/**
 * 
 * @param {图片预加载} obj 
 */
function advanceLoad(obj) {
  var index = 0
  var dom = document.querySelector(obj.el)
  var load = document.createElement('div')

  load.innerText = '已加载0%'
  load.style.height = '100%'
  load.style.width = '100%'
  load.style.backgroundColor = '#000'
  load.style.color = '#fff'
  load.style.display = 'fiex'
  load.style.lineHeight = obj.height+'px'
  load.style.textAlign = 'center'
  dom.appendChild(load)

  for (var i = 0; i < obj.list.length; i++) {
    var element = obj.list[i];
    var el = new Image()
    el.src = element
    el.onload = function(){
      index++
      var len = Math.round((index/obj.list.length)*100)
      load.innerText = '已加载' + len +'%'
      if(len == 100){
        load.innerText = ''
        load.style.display = 'none'
        obj.callBack()
      }
    }
  }
}

export default {
  name:"boom",
  props: {
    imgs: {
      type: Array,
      default() {
        return [];
      },
    },
    width: {
      type: Number,
      default: 640,
    },
    height: {
      type: Number,
      default: 360,
    },
  },
  data() {
    return {
      z: 100,
      index: 0,
      x: 13,
      y: 10,
      box: "",
      load:1,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.box = document.getElementById("box");
      this.box.style.width = this.width + "px";
      this.box.style.height = this.height + "px";
      var that = this
      advanceLoad({
        list:that.imgs,
        el:"#box", //这个类名不能重复
        height:this.height,
        callBack:function(e){
          that.boom(that.x, that.y);
        }
      })
      this.box.style.opacity = '1'

    });
  },
  methods: {
    boom(l, t) {
      //创建一个新的div
      var oParentNode = document.createElement("div");
      //设置z-index的值
      oParentNode.style.zIndex = this.z;
      this.z--;
      this.box.appendChild(oParentNode);
      var x = l,
        y = t;
      for (var i = 0; i < y; i++) {
        for (var j = 0; j < x; j++) {
          //创建碎片
          var oDiv = document.createElement("div");
          //添加背景图片
          oDiv.style.background = "url(" + this.imgs[this.index] + ")";
          oDiv.style.width = this.box.clientWidth / x + "px";
          oDiv.style.height = this.box.clientHeight / y + "px";
          oDiv.style.left = (this.box.clientWidth / x) * j + "px";
          oDiv.style.top = (this.box.clientHeight / y) * i*0.999 + "px";
          oDiv.style.backgroundSize = this.width + "px" + " " + this.height + "px";
          oDiv.style.backgroundPositionX =
            (this.box.clientWidth / x) * - j + "px";
          oDiv.style.backgroundPositionY =
            (this.box.clientHeight / y) * - i + "px";
          oDiv.style.transition = Math.random() * 1 + 2.5 + "s";
          oParentNode.appendChild(oDiv);
        }
      }

      var allDiv = oParentNode.children;
      var setimer = 3500
      var timer1 = setTimeout(() => {
        clearTimeout(timer1)
        this.index++;
        this.index == this.imgs.length && (this.index = 0);
        this.boom(l, t);
        for (var i = 0; i < allDiv.length; i++) {
          allDiv[i].style.transform =
            "perspective(900px) rotateX(" +
            (Math.random() * 500 - 250) +
            "deg) rotateY(" +
            (Math.random() * 500 - 250) +
            "deg) translateX(" +
            (Math.random() * 500 - 250) +
            "px) translateY(" +
            (Math.random() * 500 - 250) +
            "px) translateZ(" +
            (Math.random() * 1000 - 500) +
            "px)";
          allDiv[i].style.opacity = 0;
        }
      }, setimer);
      var timer2 = setTimeout(function () {
        clearTimeout(timer2)
        oParentNode.remove();
      }, 6000);
    },
  },
};
</script>

<style scoped>
.boomImgBox{
  opacity: 0;
}
</style>